<template>
  <div class="frame">

  </div>
</template>
<script setup>
import { Leafer, Frame, Ellipse, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: '#333' })
const frame = new Frame({
  width: 300,
  height: 300,
  draggable: true
})
const rect = new Ellipse({
  x: 10,
  y: 10,
  width: 50,
  height: 50,
  fill: '#32cd79',
  draggable: true
})
const rect2 = new Rect({
  x: 150,
  y: 150,
  width: 50,
  height: 50,
  fill: '#32cd79',
  cornerRadius: [0, 30, 80, 30],
  draggable: false
})
leafer.add(frame)
frame.add(rect)
frame.add(rect2)
</script>
<style scoped>
.frame {
  color: #ccc
}
</style>
